<div class="vpnColumns-container">
    <div class="vpnColumns-col">
        <label class="vpnColumns-label" translate-context="Label for the vpn columns" translate>Speed</label>
        <label class="vpnColumns-label" translate-context="Label for the vpn columns" translate>Connections/Devices</label>
        <label class="vpnColumns-label">Tor VPN <i class="fa fa-info-circle"  pt-tooltip-translate-context="Tooltip" pt-tooltip-translate="Send all your traffic through the Tor network with a single click"></i></label>
        <label class="vpnColumns-label">Secure Core <i class="fa fa-info-circle"  pt-tooltip-translate-context="Tooltip" pt-tooltip-translate="Provides additional protection against VPN server compromise by routing connections through our Secure Core network"></i></label>
    </div>
    <label for="AddProtonVPNBasic" role="presentation" class="vpnColumns-col vpnColumns-vpnbasic-col">
        <header class="vpnColumns-header">
            <span
                class="vpnColumns-selected"
                translate-context="Info"
                translate>Selected plan</span>
            <span class="vpnColumns-vpnbasic-title">ProtonVPN Basic</span>
            <span class="vpnColumns-vpnbasic-amount">{{ ::vpnbasicAmount }}</span>
        </header>
        <div>
            <strong translate-context="Info for the vpn columns" translate>High</strong>
        </div>
        <div>
            <strong>2</strong>
        </div>
        <div>
            <i class="fa fa-times"></i>
        </div>
        <div>
            <i class="fa fa-times"></i>
        </div>
        <footer class="vpnColumns-footer">
            <button type="button" id="AddProtonVPNBasic" data-action="vpnbasic" translate-context="Action for the vpn columns" translate>Add ProtonVPN Basic</button>
            <button type="button" disabled translate-context="Action for the vpn columns" translate>ProtonVPN Basic Selected</button>
        </footer>
    </label>
    <label for="AddProtonVPNPlus" role="presentation" class="vpnColumns-col vpnColumns-vpnplus-col">
        <header class="vpnColumns-header">
            <span
                class="vpnColumns-selected"
                translate-context="Info"
                translate>Selected plan</span>
            <span class="vpnColumns-vpnplus-title">ProtonVPN Plus</span>
            <span class="vpnColumns-vpnplus-amount">{{ ::vpnplusAmount }}</span>
        </header>
        <div>
            <strong translate-context="Info for the vpn columns" translate>Highest</strong>
        </div>
        <div>
            <strong>5</strong>
        </div>
        <div>
            <i class="fa fa-check"></i>
        </div>
        <div>
            <i class="fa fa-check"></i>
        </div>
        <footer class="vpnColumns-footer">
            <button type="button" id="AddProtonVPNPlus" data-action="vpnplus" translate-context="Action for the vpn columns" translate>Add ProtonVPN Plus</button>
            <button type="button" disabled translate-context="Action for the vpn columns" translate>ProtonVPN Plus Selected</button>
        </footer>
    </label>
</div>
